<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :width="width"
      :before-close="beforeClose"
    >
      <div class="dialog-content">
        <div class="search">
          <div class="search-left">
            <div class="input-text">角色名称</div>
            <el-input
              placeholder="请输入"
              v-model="roleName"
              size="small"
              @keyup.enter.native="searchRoleList"
              clearable
            >
            </el-input>
          </div>
          <div class="search-right" style="display: flex; margin-top: auto">
            <div class="search-btn" @click="searchRoleList">
              <i
                class="el-icon-search"
                style="color: #fff; font-size: 16px"
              ></i>
            </div>
            <div class="refresh-btn" @click="refreshRole">
              <i
                class="el-icon-refresh-right"
                style="font-weight: 700; font-size: 16px"
              ></i>
            </div>
          </div>
        </div>
        <div class="tab-list">
          <div class="tab-list-left">
            <el-tabs type="border-card">
              <el-tab-pane label="角色">
                <div class="tips">{{ "" }}</div>
                <ul class="userList roleList">
                  <li
                    class="userList-item"
                    v-for="item in roleList"
                    :key="item.roleId"
                  >
                    <i class="el-icon-s-custom" style="margin-right: 5px"></i>
                    {{ item.roleName }}
                    <span class="checkbox">
                      <el-checkbox
                        v-model="item.checked"
                        @change="selectRole(item)"
                      ></el-checkbox>
                    </span>
                  </li>
                  <div
                    class="more"
                    v-if="roleTotal > roleList.length"
                    @click="moreRole"
                  >
                    加载更多<i class="el-icon-caret-bottom"></i>
                  </div>
                </ul>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="tab-list-right">
            <div class="header">
              <div class="header-left">已选择 {{ num }}/500</div>
              <div class="header-right">
                <el-button size="mini" type="info" @click="removeAllRole"
                  >清除</el-button
                >
              </div>
            </div>
            <div class="body">
              <div class="select" v-if="selectRoleList.length > 0">
                <div class="title">角色</div>
                <ul class="list">
                  <li
                    class="list-item"
                    v-for="item in selectRoleList"
                    :key="item.roleId"
                  >
                    <i class="el-icon-s-custom" style="margin-right: 5px"></i>
                    {{ item.roleName }}
                    <i class="el-icon-close" @click="removeRole(item)"></i>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="beforeClose">确 定</el-button>
        <!-- <el-button type="primary" @click="submitRole">确 定</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "Role",
  props: {
    // 是否显示
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    // 标题
    title: {
      type: String,
      default: "选择角色",
    },
    //角色列表数据
    roleList: {
      type: Array,
      default: () => [],
    },
    //选中的角色列表数据
    selectRoleList: {
      type: Array,
      default: () => [],
    },
    // 分页总数
    roleTotal: {
      type: Number,
      default: 0,
    },
    // 每页条数
    pageSize: {
      type: Number,
      default: 10,
    },
    // 页数
    rolePage: {
      type: Number,
      default: 1,
    },
    // dialog宽度
    width: {
      type: String,
      default: "80%",
    },
  },
  data() {
    return {
      roleName: "",
      // selectRoleList:[]
    };
  },
  computed: {
    num() {
      return this.selectRoleList.length;
    },
  },
  methods: {
    // 搜索
    searchRoleList() {
      this.$emit("searchRole", this.roleName);
    },
    // 关闭dialog前
    beforeClose() {
      this.$emit("closeRole", false);
    },
    // 确定按钮
    submitRole() {
      this.$emit("submit", false);
    },
    // 清空
    refreshRole() {
      this.roleName = "";
      this.$emit("refreshRole");
    },
    // 选中角色
    selectRole(item) {
      this.$emit("selectRole", item);
    },
    // 加载更多
    moreRole() {
      this.$emit("moreRole");
    },
    // 移除选中角色
    removeRole(item) {
      this.$emit("removeRole", item);
    },
    // 移除所有选中角色
    removeAllRole() {
      this.$emit("removeAllRole");
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
::v-deep.el-tabs--border-card {
  box-shadow: 0 0 0;
}
.dialog-search {
  width: 100%;
  display: flex;
  // padding-bottom: 50px;
  // border-bottom: 1px solid #ededed;
  margin-bottom: 20px;
  position: relative;
  .search-left {
    width: 60%;
    display: flex;
    .input-text {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 25%;
    }
  }
  .search-right {
    // position: absolute;
    // right: 0;
    // top: 5px;
    display: flex;
    align-items: center;
    .search-btn {
      width: 50px;
      height: 32px;
      background-color: #5a616f;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 10px;
      cursor: pointer;
    }
    .refresh-btn {
      width: 50px;
      height: 32px;
      background-color: #e9e9e9;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
  .btn {
    position: absolute;
    top: 40px;
    right: 0;
  }
  .form-time {
    width: 130px !important;
    height: 28px !important;
    line-height: 28px !important;
  }
}
.search-left {
  width: 60%;
  display: flex;
  .input-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
  }
}
.search {
  width: 60%;
  display: flex;
  align-items: center;
  .search-input {
    display: flex;
    width: 90%;
    .input-text {
      display: flex;
      align-items: center;
      justify-content: end;
      width: 8%;
    }
    .input {
      width: 40%;
    }
  }
  .search-btn {
    width: 50px;
    height: 32px;
    background-color: #5a616f;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    cursor: pointer;
  }
  .refresh-btn {
    width: 50px;
    height: 32px;
    background-color: #e9e9e9;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
.more {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.tab-list {
  display: flex;
  margin-top: 15px;
  height: 400px;
  .tab-list-left {
    width: 60%;
    height: 100%;
    .tips {
      color: #ccc;
    }
    .userList {
      height: 300px;
      margin-top: 10px;
      overflow: auto;
      .userList-item {
        width: 100%;
        height: 30px;
        line-height: 30px;
        display: flex;
        align-items: center;
        position: relative;
        .item-text {
          margin-left: 5px;
        }
        .checkbox {
          position: absolute;
          right: 0;
        }
      }
    }
    .userList::-webkit-scrollbar {
      display: none;
    }
    .roleList {
      height: 321px;
    }
  }
  .tab-list-right {
    width: 40%;
    height: 100%;
    .header {
      width: 100%;
      height: 40px;
      line-height: 40px;
      background-color: #f5f7fa;
      border: 1px solid #dcdfe6;
      border-left: none;
      box-shadow: 0 0 0;
    }
    .body {
      width: 100%;
      height: 362px;
      border: 1px solid #dcdfe6;
      border-left: none;
      border-top: none;
      // -webkit-box-shadow:2px 2px 10px #dcdfe6;
      // box-shadow:0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
      overflow: auto;
      .select {
        padding: 5px;

        .title {
          margin-bottom: 5px;
          width: 30px;
          height: 20px;
          color: #62b3ff;
          line-height: 20px;
        }
        .list {
          font-size: 12px;
          .list-item {
            width: 100%;
            height: 30px;
            line-height: 30px;
            margin-bottom: 3px;
            display: flex;
            align-items: center;
            background-color: #f7f7f7;
            position: relative;
            .item-text {
              margin-left: 5px;
            }
            .el-icon-close {
              position: absolute;
              right: 10px;
              top: 10px;
              cursor: pointer;
            }
          }
        }
      }
    }
    .body::-webkit-scrollbar {
      display: none;
    }
  }
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
